const Person = {
    func : {
        init : function(){
            let uid = document.querySelector("#uid"); // 通过 name 找的
            let token = document.querySelector("#token"); // 通过 name 找的

            // 1. 设置 Cookies 是用户登陆的时候过来的，登陆时候的 url 会有用户提交的 username 和 password。
            // 2. server 端会设置并存储 session，并echo "<script>window.location.href = '../../views/user/person.html?uid={$uid}&token={$token}&refer=ax.com';</script>"; 
            // 3. 下面就可以通过 Person.func.getQueryVariable("") 来获取对应的 uid 和 token 设置浏览器 client 的 Cookies 了
            
            // if(Cookies.get("uid") == "false" || Cookies.get("token") == "false" || Cookies.get("uid") == "" || Cookies.get("token") == ""){
            // 做一个回调，不用上面的方式直接判断。字符串为空的时候，可能报错的不是字符串为空，可能是报的 undefined。
            if(Person.func.getQueryVariable("refer") != undefined && Person.func.getQueryVariable("refer") == "ax.com"){ 
                // 1. 不可用
                // Person.func.getUid(); 
                // 2. 还是得用 cookie 技术
                // 设置 cookie 的 token 和 uid
                Cookies.set('uid', Person.func.getQueryVariable("uid"), { expires: 1, path: '' });
                Cookies.set('token', Person.func.getQueryVariable("token"), { expires: 1, path: '' });
                // 上面把 token 和 uid 存储到了浏览器的 cookie 中了，那么下面前端 js 代码就可以直接用 uid 和 token 了
                
                uid.value = Cookies.get("uid");
                token.value = Cookies.get("token");
            }else{
                uid.value = Cookies.get("uid");
                token.value = Cookies.get("token");
            }


            // 1. 用 axios.get("/part18/controllers/user/getAvatar.php?uid=6")， 获取对应的 getAvatar.php 从数据库读取 avatar，组成对应的 json 数据。
            // 2. 更新头像的 src
            // 如果图像图片已经存在的话：还上传的话，会更新数据库的 avatar 字段。但是不会读取 avatar 并更新头像。
            
            Person.func.getAvatar();

        },
        uploadText : function(){
            $('#ModalUploadText').modal({
                show : true // 点击头像 ---> 弹出更换头像的提示 tips
            }); 
        },
        getTextList : function(){
            $avatarPath = Person.func.getQueryVariable("avatarPath");

            axios.get("/part18/apis/user/getTextList.php?", {
                params: {
                    uid: Cookies.get("uid"),
                    token: Cookies.get("token"), 
                    avatarPath: $avatarPath,
                }
            }).then(function(textArrayJson){
                console.log(textArrayJson.data.status); // 先输出出来看一下
                // console.log(textArrayJson.data.textArray);

                // 修改前端的可点击查看文章列表
                let Texts = document.querySelector("#Texts");
                Texts.innerHTML = "";

                let textArray = textArrayJson.data.textArray;
                let vars = textArray.split("&");
                for (let i = 0; i < vars.length - 1; i++) { // 最后是有一个空的 &
                    let pair = vars[i].split("/");
                    // console.log(pair[pair.length - 1]); // pair[pair.length - 1] 就是后端传过来的 文章名字了

                    // js常用库jQuery.txt  把后面的 .txt 不亚奥显示了。但是下面 pair[pair.length - 1] 改成 texts[0] 的时候，
                    // 那么下面 getText 函数 url 传递的 textName 就得加上 ".txt" 的哦，不然有 undefined 了
                    let texts = (pair[pair.length - 1]).split("."); 
                    Texts.innerHTML += `
                        <li class="Text">
                            <a class="text" id="text1" onclick="Person.func.getText(this)">${texts[0]}</a>
                        </li>
                    `;
                }
            });
        },
        getText : function(element){
            // 1. 前端请求需要展示对应的文章内容
            // console.log(element.tagName); // 被点击的标签名
            // console.log(element.textContent); // 被点击的标签内容：php基础语法、php基础语法应用 ......

            // 2. axios.get((url) 来向后端请求具体的文章内容
            $textName = element.textContent + ".txt";

            // alert($textName); // debug

            axios.get("/part18/apis/user/getText.php?", {
                params: {
                    // uid: Cookies.get("uid"),
                    // token: Cookies.get("token"),
                    textName: $textName, 
                }
            }).then(function(content){
                // console.log(content.data); // 先输出出来看一下
                console.log(content.data.status);
                // console.log(content.data.textContent);

                // 直接把后端 json 传递过来的文章内容添加到对用的文章展示 p 标签里面
                var Content = document.querySelector("#textContent");
                Content.textContent = content.data.textContent;
            });
        },
        getQueryVariable : function(variable){ // 截取当前页面 url 的参数值
            let query = window.location.search.substring(1);
            let vars = query.split("&");
            for (let i = 0; i < vars.length; i++) {
                let pair = vars[i].split("=");
                if(pair[0] == variable){
                    return pair[1];
                }
            }
            return(false);
        },
        uploadAvatar : function(){ // 上传头像图片
            // alert("上传");

            // 下面的一行等效于：document.selector("#ModalUploadAvatar").modal()，是 jquery 对 js 做了一层封装
            // BootStrap 依赖于 jquery
            $('#ModalUploadAvatar').modal({
                show : true // 点击头像 ---> 弹出更换头像的提示 tips
            }); 


        },
        getAvatar : function(){ // axios.get(url) 获取数据库 avatarPath, 并新头像标签的 src
            // 使用 axios，从 https://localhost/part18/controllers/user/getAvatar.php?uid=6 获取 json 数据到 res 中
            // axios.get("part18/controllers/user/getAvatar.php?uid=6", function(res){ 
            // 上面的情况少了一个 / 的话，那么实际的请求路径就是：http://localhost/part18/views/user/part18/controllers/user/getAvatar.php?uid=6，肯定是报 404 的
            
            // bug: 写死了只有 uid = 6 的用户可以多次更换头像，别的用户登陆都是用的 uid = 6 用户的头像
            // axios.get("/part18/controllers/user/unused_getAvatar.php?uid=6") 
            // // axios.get("/part18/apis/user/getAvatar.php?uid=6") // error
            // // axios.get("/part18/apis/user/getAvatar.php") // 这里有 uid 和 token，可以搞成 json 数据。但是 error
            // .then(function(res){
            //     // 1. debug
            //     // 在浏览器的控制台 console 就可以看到这个文件的这一行输出了一个 json 数据的哦。
            //     // 可以看到 json 数据里面的 data，有我们设置的 avatar(上传头像图片的位置) 和 status(是否上传成功)
            //     console.log(res); 

            //     // 2. 用上传的图片的地址，更换 img 的 src，就相当于是更新了头像
            //     let avatar = document.querySelector("#avatar");
            //     avatar.src = res.data.avatar;
            // });

            
            // 
            // axios.get("../../../part18/apis/user/getAvatar.php?", { // error
            axios.get("/part18/apis/user/getAvatar.php?", { // error
                // 设置 url 的 uid 和 token 参数
                params: { 
                    uid: Cookies.get("uid"),
                    token: Cookies.get("token"),
                }
            }).then(function(res){
                // 1. debug
                // 在浏览器的控制台 console 就可以看到这个文件的这一行输出了一个 json 数据的哦。
                // 可以看到 json 数据里面的 data，有我们设置的 avatar(上传头像图片的位置) 和 status(是否上传成功)
                
                // alert(res.data.avatar); // debug 的时候看到我们上面 axios.get 获取出来的 json 数据， res.data.avatar 是 undefined 的
                // alert(res.data); // debug 看到我们 avatar: "..\/..\/static\/img\/user\/person\/\u4e2a\u4eba\u5934\u50cf.jpg"
                

                console.log(res); 


                // 2. 用上传的图片的地址，更换 img 的 src，就相当于是更新了头像
                let avatar = document.querySelector("#avatar");
                // avatar.src = ""; // no error
                // avatar.src = res.data.avatar; // res.data.avatar: undefined ==> error 

                // let avatarPath = "..\/..\/static\/img\/user\/person\/\u4e2a\u4eba\u5934\u50cf.jpg";
                if(res.data.avatar != undefined){
                    // 3. 这里通过上面 axios.get 得到的 json 数据是有问题的
                    avatar.src = res.data.avatar;
                    // alert(avatar.src); // http://localhost/part18/static/img/user/person/%E4%B8%AA%E4%BA%BA%E5%A4%B4%E5%83%8F.jpg
                    // avatarPath=/part18/static/img/user/person/校园地图.jpg
                }else{
                    // 4. 所以备用方案，直接用 url，不过 url 在不同的系统上长度是有不同的限制的
                    
                    // debug 成功！！！
                    // alert('因为上面的问题 ==> 通过 url 的参数来传递 avatarPath 的数据了, www'); 
                    // 使得我们下面的 url 路径很长了：http://localhost/part18/views/user/person.html?uid=8&token=ea1c9113e177388d564ffc8bdfd34256&avatarPath=/part18/static/img/user/person/%E6%A0%A1%E5%9B%AD%E5%9C%B0%E5%9B%BE.jpg
                    $avatarPath = Person.func.getQueryVariable("avatarPath");
                    avatar.src = $avatarPath;
                }
                
            });
        },
        getUid : function(){ // 最开始，获取用户 uid 的函数，功能不可用。后 login 是设置 server 的 session 和 client 的 Cookies 解决。
            // axios 可以
            axios.get("/part18/controllers/user/getUid.php") // 不输入 username 和 password，因为 getUid.php 文件里面不需要获取参数
            .then(function(jsonData){
                // 1. debug
                // 在浏览器的控制台 console 就可以看到这个文件的这一行输出了一个 json 数据的哦。
                // 可以看到 json 数据里面的 data，有我们设置的 avatar(上传头像图片的位置) 和 status(是否上传成功)
                console.log(jsonData); 

                // 2. 用上传的图片的地址，更换 img 的 src，就相当于是更新了头像
                let uid = document.querySelector("#uid");
                uid.value = "12"; // no undefined
                // uid.value = jsonData.data.uid; /// undefined
            });
            

            // fetch 可以获取 php 文件里面的 json_encode(array) 生成的 json 数据的哦
            // fetch("../../../controllers/user/getUid.php", {
            //     method: "GET",
            //     mode: "cors", // 允许发送跨域请求
            //     credentials: "include"
            // })
            // .then(response => response.json())
            // .then(uidJson => {
            //     let uid = document.querySelector("#uid");
            //     // uid.value = "12"; // no undefined
            //     uid.value = uidJson.data.uid; /// undefined
            // });
        },
        compressor : function(e){ // 图片压缩的函数
            const file = e.target.files[0];
            
            if (!file) {
                return;
            }
            
            if(file.size > 2048000){
                alert('文件太大！！！');
                return;
            }

            new Compressor(file, {
                quality: 0.6,
            
                // The compression process is asynchronous,
                // which means you have to access the `result` in the `success` hook function.
                success(result) {
                    // 1. 预览
                    console.log(result); // 把文件压缩成 Blob 编码 ---> result
                    console.log(Person.func.BlobToBase64(result).then(res =>{ // 把 Blob 编码(result)变成 base64 编码 ---> res
                        // console.log('base64', res); // 把 base64 编码 res 输出出来 ---> 其实就是图片文件
                        
                        let avatarPreview = document.querySelector("#avatarPreview");
                        avatarPreview.src = res;
                    }));

                    /*
                    // 2. 压缩后的文件上传
                    const formData = new FormData();

                    // The third parameter is required for server
                    var uid = Cookies.get("uid");
                    var token = Cookies.get("token");
                    var avatarPath = Cookies.get("avatarPath"); // 当前的头像路径

                    formData.append("uid", uid);
                    formData.append("token", token);
                    formData.append("avatarPath", avatarPath);
                    formData.append("fileName", result, result.name); // 想要更新后的头像路径
                    
                    // Send the compressed image file to server with XMLHttpRequest.
                    // 下面的 url 还是得写一个绝对路径的哦
                    axios.post('/part18/apis/user/uploadAvatar.php', formData).then((res) => {
                    // axios.post('/part18/apis/user/uploadAvatar.php?', {
                    //     params:{
                    //         uid: uid,
                    //         token: token,
                    //         avatarPath: avatarPath,
                    //         // fileName: result.name,
                    //     }
                    // }).then((res) => {
                        console.log(res);

                        // 1. 获取当前URL  
                        let currentURL = new URL(window.location.href);  
                        // 2. 获取URL参数  
                        let params = new URLSearchParams(currentURL.search);  

                        if(res.data.status == true){
                            alert('上传成功' + currentURL);
                            
                            // 3. 修改参数值。如果参数不存在，它将被添加；如果存在，它的值将被更新。  
                            params.set('uid', uid);  
                            params.set('token', token);  
                            params.set('avatarPath', res.data.avatarPath); // 成功的话，肯定是用新的 avatarPath 啦
                        }else{
                            alert('上传失败' + currentURL);

                            // $('#ModalUploadAvatar').modal({
                            //     show : false // 点击头像 ---> 弹出更换头像的提示 tips
                            // }); 
                            // 把对应的 Modal 关闭，不是用上面的写法的哦（看文档，可能最开始创建得用上面的写法来弹出来。后面也还是得用下面的写法来打开 Modal）
                            // $('#ModalUploadAvatar').modal('show')
                            // $('#ModalUploadAvatar').modal('hide');
                            Person.func.hideModalUploadAvatar(); // 上传头像的 Modal 不关闭的话，再点提交的话是会有问题的
                            return; // 还是直接关闭吧

                            // 3. 修改参数值。如果参数不存在，它将被添加；如果存在，它的值将被更新。  
                            params.set('uid', uid);  
                            params.set('token', token);  
                            params.set('avatarPath', avatarPath); // 失败的话，肯定还是用原来的 avatarPath 啦
                        }

                    });
                    */
                },
                error(err) {
                    console.log(err.message);
                },
            });
        },
        hideModalUploadAvatar : function(){
            $('#ModalUploadAvatar').modal('hide');
        },
        BlobToBase64 : function(blob) { // Blob 转 base64 编码的代码
            return new Promise((resolve,reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onload = () => {
                    const base64 = reader.result;
                    resolve(base64);
                }
                reader.onerror = error => reject(error);
            });
        }
    }
}